<!-- pages/editDice/editDice.vue -->
<template>
    <view class="container">
        <view class="form">
            <view class="form-item">
                <text class="label">骰子名称</text>
                <input v-model="dice.name" placeholder="输入骰子名称" />
            </view>
            
            <view class="form-item">
                <text class="label">面数</text>
                <input 
                    v-model.number="faceCount" 
                    type="number" 
                    min="2" 
                    @blur="updateFaceCount"
                />
            </view>
            
            <view class="faces-container">
                <text class="section-title">各面内容</text>
                <view 
                    v-for="(face, i) in dice.faces" 
                    :key="i" 
                    class="face-item"
                >
                    <text>第{{ i + 1 }}面:</text>
                    <input v-model="face.content" placeholder="输入内容" />
                </view>
            </view>
            
            <button @click="saveDice" type="primary">保存</button>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useDiceStore } from '@/store'
/* uni-app 页面可以使用 onLoad 生命周期钩子 */
import { onLoad } from '@dcloudio/uni-app' //'uni-app'

const diceStore = useDiceStore()

const dice = reactive({
    name: '',
    faces: [
        { content: '' },
        { content: '' }
    ]
})
const faceCount = ref(2)
const index = ref(-1)

onLoad((options) => {
    if (!options || isNaN(Number(options.index))) {
        index.value = -1
        return
    }
    index.value = Number(options.index)
    if (index.value >= 0 && diceStore.dices[index.value]) {
        // 使用深拷贝防止直接引用 store 数据
        const diceData = JSON.parse(JSON.stringify(diceStore.dices[index.value]))
        dice.name = diceData.name
        dice.faces = diceData.faces
        faceCount.value = dice.faces.length
    }
})

function updateFaceCount() {
    const newCount = parseInt(faceCount.value) || 2
    // 构建新的 faces 数组，如果原来存在，则保留已有内容，否则置空
    const newFaces = Array.from({ length: newCount }, (_, i) => ({
        content: i < dice.faces.length ? dice.faces[i].content : ''
    }))
    dice.faces = newFaces
}

function saveDice() {
    if (!dice.name.trim()) {
        uni.showToast({ title: '请输入骰子名称', icon: 'none' })
        return
    }
    for (const face of dice.faces) {
        if (!face.content.trim()) {
            uni.showToast({ title: '请填写所有面的内容', icon: 'none' })
            return
        }
    }
    if (index.value >= 0) {
        diceStore.updateDice(index.value, { ...dice, faces: dice.faces })
    } else {
        diceStore.addDice({ ...dice, faces: dice.faces })
    }
    uni.navigateBack()
}
</script>

<style>
.container {
    padding: 20px;
}
.form-item {
    margin-bottom: 20px;
}
.label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
input {
    border: 1px solid #ddd;
    padding: 8px 12px;
    width: 100%;
    border-radius: 4px;
}
.faces-container {
    margin: 20px 0;
}
.section-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}
.face-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.face-item input {
    flex: 1;
}
</style>